<template>
  <div class="defaultnotice">
    <div class="bluestripe">
      <div class="rect"></div>
      <div class="name">请求SD-SW</div>
    </div>
    <!-- ---content -->
    <div class="trademessage">
      <div class="title">交易信息</div>
      <el-divider></el-divider>
      <div class="formcontainer">
        <el-form ref="form" :model="form" label-width="150px" :disabled='true'>
          <el-row>
            <el-col :span="6">
              <el-form-item label="交易流水号：" class="item" :required="true">
                <el-input v-model="form.name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="请求报文类型：" :required="true">
                <el-input v-model="form.name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="银联单号：" :required="true">
                <el-input v-model="form.name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="银联二级单号：" :required="true">
                <el-input v-model="form.name"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="6">
              <el-form-item label="成员单位单号：" :required="true">
                <el-input v-model="form.name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="交易日期时间：" :required="true">
                <el-input v-model="form.name"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
    <!-- 故障信息 -->
    <div class="defaultmessage trademessage">
      <div class="title2 title">故障信息</div>
      <el-divider></el-divider>
      <div class="formcontainer">
        <el-form ref="form" :model="form" label-width="150px" :disabled='true'>
          <el-row>
            <el-col :span="6">
              <el-form-item label="故障类型：" :required="true">
                <el-input v-model="form.name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="故障机构标识：" :required="true">
                <el-input v-model="form.name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="故障机构名称：" :required="true">
                <el-input v-model="form.name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="故障机构账户类型：" :required="true">
                <el-input v-model="form.name"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="故障开始时间：" :required="true">
                <el-input v-model="form.name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="影响业务类型：" :required="true">
                <el-input v-model="form.name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="故障概要：" :required="true">
                <el-input v-model="form.name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="故障监控对象：" :required="true">
                <el-input v-model="form.name"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="监控对象统计口径：" :required="true">
                <el-input v-model="form.name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="期望完成处理时间：" :required="true">
                <el-input v-model="form.name"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
    <!-- 附件 -->
    <div class="attachment trademessage">
      <div class="title title3">附件</div>
      <el-divider></el-divider>
      <div class="file"></div>
    </div>
    <!--联系信息集合-->
    <div class="messageset trademessage">
      <div class="title4 title">联系信息集合</div>
      <el-divider></el-divider>
      <div class="form4" style="margin-bottom: 20px">
        <el-form ref="form" :model="form" label-width="150px" :disabled='true'>
          <el-row>
            <el-col :span="6">
              <el-form-item label="联系人姓名：" :required="true">
                <el-input v-model="form.name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="联系方式：" :required="true">
                <el-input v-model="form.name"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
    <!-- ------ -->
    <div class="bluestripe">
      <div class="rect"></div>
      <div class="name">应答SD-SW</div>
    </div>
    <div class="responseform">
      <el-form ref="form" :model="form" label-width="150px" :disabled='true'>
        <el-row>
          <el-col :span="6">
            <el-form-item label="银联单号">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="银联二级单号">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="成员单位单号">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="系统返回码">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="系统返回说明">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="系统返回时间">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!-- ------请求sw-Rc -->
    <div class="bluestripe">
      <div class="rect"></div>
      <div class="name">请求SW-RC</div>
    </div>
        <div class="trademessage">
      <div class="title">交易信息</div>
      <el-divider></el-divider>
      <div class="formcontainer">
        <el-form ref="form" :model="form" label-width="150px" :disabled='true'>
          <el-row>
            <el-col :span="6">
              <el-form-item label="交易流水号：" :required="true">
                <el-input v-model="form.name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="请求报文类型：" :required="true">
                <el-input v-model="form.name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="银联单号：" :required="true">
                <el-input v-model="form.name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="银联二级单号：" :required="true">
                <el-input v-model="form.name"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="6">
              <el-form-item label="成员单位单号：" :required="true">
                <el-input v-model="form.name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="交易日期时间：" :required="true">
                <el-input v-model="form.name"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
    <!-- 故障信息 -->
    <div class="defaultmessage trademessage">
      <div class="title2 title">故障信息</div>
      <el-divider></el-divider>
      <div class="formcontainer">
        <el-form ref="form" :model="form" label-width="150px" :disabled='true'>
          <el-row>
            <el-col :span="6">
              <el-form-item label="故障类型：" :required="true">
                <el-input v-model="form.name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="故障机构标识：" :required="true">
                <el-input v-model="form.name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="故障机构名称：" :required="true">
                <el-input v-model="form.name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="故障机构账户类型：" :required="true">
                <el-input v-model="form.name"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="故障开始时间：" :required="true">
                <el-input v-model="form.name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="影响业务类型：" :required="true">
                <el-input v-model="form.name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="故障概要：" :required="true">
                <el-input v-model="form.name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="故障监控对象：" :required="true">
                <el-input v-model="form.name"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="监控对象统计口径：" :required="true">
                <el-input v-model="form.name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="期望完成处理时间：" :required="true">
                <el-input v-model="form.name"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
        <!-- 附件 -->
    <div class="attachment trademessage">
      <div class="title title3">附件</div>
      <el-divider></el-divider>
      <div class="file"></div>
    </div>
       <!--联系信息集合-->
    <div class="messageset trademessage">
      <div class="title4 title">联系信息集合</div>
      <el-divider></el-divider>
      <div class="form4" style="margin-bottom: 20px">
        <el-form ref="form" :model="form" label-width="150px" :disabled='true'>
          <el-row>
            <el-col :span="6">
              <el-form-item label="联系人姓名：" :required="true">
                <el-input v-model="form.name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="联系方式：" :required="true">
                <el-input v-model="form.name"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
    <!-- 应答SW——RC -->
    <div class="bluestripe">
      <div class="rect"></div>
      <div class="name">应答SW-RC</div>
    </div>
    <div class="response2">
          <el-form ref="form" :model="form" label-width="150px" :disabled='true'>
        <el-row>
          <el-col :span="6">
            <el-form-item label="系统返回码">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="系统返回说明">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="系统返回时间">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      
      </el-form>
    </div>
     <!-- ---返回按钮 -->
      <div class="btnbox">
        <el-button type="primary" icon="el-icon-d-arrow-left" @click='back()'>返回</el-button>
      </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
    };
  },
  methods:{
    back(){
        this.$eventBus.$emit("zipao")
    }
  }
};
</script>

<style lang='scss' scoped>
.defaultnotice {
  .bluestripe {
    background: #d6e4ff;
    height: 100%;
    width: 100%;
    padding: 8px 0 8px 0;
    display: flex;
    margin-bottom: 20px;
    .rect {
      background-color: #007aff;
      margin-right: 20px;
      height: 16px;
      width: 4px;
    }
    .name {
      font-size: 14px;
    }
  }
  .trademessage {
    height: 100%;
    width: 100%;
    .title {
      font-weight: 600;
      font-size: 16px;
    }
    .file {
      height: 70px;
      // background-color: pink;
      width: 100%;
    }
  }
  .btnbox {
    width: 100%;
    display: flex;
    justify-content: center;
  }
  
}
</style>
<style lang='scss'>
 .item .el-form-item__label{
    white-space: nowrap;
   }
</style>